<template>
	<div class="kingzone-container">
		<!-- 金刚圈管理真正放这里 -->
		<div class="search-container">
			<el-button type="success" @click="handleAdd">新增</el-button>
		</div>
		<div class="kingzone-table-container">
			<el-table :data="categoryData" border style="width: 100%">
				<el-table-column prop="name" label="金刚区名称" />
				<el-table-column label="金刚区图标">
					<template #default="{ row }">
						<text :class="row.url" :style="{ color: row.color }" class="iconfont" />
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="{ row }">
						<el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
						<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 新增或编辑对话框 -->
		<el-dialog v-model="dialogVisible" :title="dialogTitle" center width="30%">
			<el-form :model="form" label-width="50px">
				<el-form-item label="名称">
					<el-input v-model="form.name" maxlength="10" />
				</el-form-item>
				<el-form-item label="图标">
					<div class="icon-grid">
						<div v-for="icon in icons" :key="icon.name"
							:class="['icon-item', { selected: form.url === icon.url }]" @click="form.url = icon.url">
							<div :class="icon.url" class="icon-display iconfont icon-select-erea"
								:style="{ color: form.url === icon.url ? form.color : icon.color }" />
						</div>
					</div>
				</el-form-item>
				<el-form-item label="颜色">
					<el-color-picker v-model="form.color" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handleSubmit">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';

	import { ElMessage, ElMessageBox } from 'element-plus';
	import { Plus } from '@element-plus/icons-vue';

	// import type { KingZoneItem, IconItem } from '@/api/types';
	import { getCategoryList, addCategory, updateCategory, deleteCategory } from '@/api/category';
	import type { CategoryResponse } from '@/api/types/category';

	// 分类数据
	const categoryData = ref<CategoryResponse['data']['info_list'] | null>(null);

	// 获取分类列表
	const fetchCategoryList = async () => {
		try {
			const res = await getCategoryList();

			if (res.data && res.data.info_list) {
				categoryData.value = res.data.info_list;

				console.log('分类列表数据:', categoryData.value);
			}
		} catch (error) {
			console.error('获取分类列表失败:', error);
		}
	};



	// // 静态模拟数据
	interface KingZoneItem {
		id : string;
		name : string;
		url : string; // 图标类名
		color : string; // 图标颜色
	}

	// 图标数据
	interface IconItem {
		name : string;
		url : string; // 图标类名
		color : string; // 图标颜色
	}
	// 图标数据
	const icons = ref<IconItem[]>([]);

	// 对话框相关
	const dialogVisible = ref(false);
	const dialogTitle = ref('新增金刚区');
	const form = ref<KingZoneItem>({
		id: '',
		name: '',
		url: '', // 修改字段名
		color: '',
	});

	// 新增金刚区
	const handleAdd = () => {
		dialogTitle.value = '新增金刚区';
		form.value = {
			id: '',
			name: '',
			url: '',
			color: '',
		};
		dialogVisible.value = true;
	};

	// 编辑金刚区
	const handleEdit = (row : KingZoneItem) => {
		dialogTitle.value = '编辑金刚区';
		form.value = { ...row };
		dialogVisible.value = true;
	};
	// 删除金刚区
	const handleDelete = (row : KingZoneItem) => {
		ElMessageBox.confirm('确定要删除该金刚区吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(async () => {
			try {
				await deleteCategory({ id: row.id });
				ElMessage.success('删除成功');
				// 刷新数据
				fetchCategoryList();
			} catch (error) {
				ElMessage.error('删除失败，请稍后再试');
			}
		}).catch(() => {
			ElMessage.info('已取消删除');
		});
	};

	// 提交表单
	const handleSubmit = async () => {
		// 检查表单数据是否完整
		if (!form.value.name) {
			ElMessage.error('请输入名称');
			return;
		}
		if (!form.value.url) {
			ElMessage.error('请选择图标');
			return;
		}

		if (!form.value.id) {
			// 新增操作
			try {
				const res = await addCategory({
					name: form.value.name,
					url: form.value.url,
					color: form.value.color,
				});
				ElMessage.success('新增成功');
				// 刷新数据
				fetchCategoryList();
				dialogVisible.value = false;
			} catch (error) {
				ElMessage.error('新增失败，请稍后再试');
			}
		} else {
			// 编辑操作
			try {
				const res = await updateCategory({
					id: form.value.id,
					name: form.value.name,
					url: form.value.url,
					color: form.value.color,
				});
				ElMessage.success('修改成功');
				// 刷新数据
				fetchCategoryList();
				dialogVisible.value = false;
			} catch (error) {
				ElMessage.error('修改失败，请稍后再试');
			}
		}
	};
	// 获取图标列表
	const fetchIcons = async () => {
		try {
			// 这里可以替换为从本地文件或 API 获取图标数据
			const localIcons = [
			  { name: '图标1', url: 'icon-jingangqu-', color: 'red' },
			  { name: '图标2', url: 'icon-jingangqu-1', color: 'orange' },
			  { name: '图标3', url: 'icon-jingangqu-2', color: 'yellow' },
			  { name: '图标4', url: 'icon-jingangqu-3', color: 'green' },
			  { name: '图标5', url: 'icon-jingangqu-4', color: 'blue' },
			  { name: '图标6', url: 'icon-jingangqu-5', color: 'purple' },
			  { name: '图标7', url: 'icon-zijian-mianxing-jingangqu', color: 'pink' },
			  { name: '图标8', url: 'icon-saoma-mianxing-jingangqu', color: 'brown' },
			  { name: '图标9', url: 'icon-tousu-mianxing-jingangqu', color: 'gray' },
			  { name: '图标10', url: 'icon-baohuo-mianxing-jingangqu', color: 'black' },
			];
			icons.value = localIcons;
		} catch (error) {
			ElMessage.error('获取图标列表失败');
		}
	};

	// 页面加载时获取图标列表和分类数据
	onMounted(() => {
		fetchIcons();
		fetchCategoryList();
	});
</script>

<style scoped lang="scss">
	.kingzone-container {
		padding: 20px;
		background-color: #fff;
		border-radius: 4px;
		width: 100%;
		display: block;
	}

	.search-container {
		display: flex;
		gap: 10px;
		margin-bottom: 20px;
	}

	.kingzone-table-container {
		margin-bottom: 20px;
	}

	.icon-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px;
	}

	.icon-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30rpx;
		height: 30rpx;
		cursor: pointer;
		border: 1px solid transparent;
		border-radius: 4px;

		&:hover {
			border-color: #409EFF;
		}

		&.selected {
			border-color: #409EFF;
			background-color: #f0f7ff;
		}
	}

	.icon-display {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-select-erea {
		width: 2em;
		height: 2em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
		font-size: 2em;
	}

	/* 使用 ::deep 穿透作用域，修改 el-dialog 的样式 */
	::deep(.el-dialog__body) {
		padding: 0 !important;
		background-color: red !important;
	}
</style>